<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('有声读物列表')" />
  </head>
  <body class="gray-bg">
    <div class="container-div">
      <div class="row">
        <div class="col-sm-12 search-collapse">
          <form id="formId">
            <div class="select-list">
              <ul>
                <li>
                  <label>读物标题：</label>
                  <input type="text" name="title" />
                </li>

                <li>
                  <a
                    class="btn btn-primary btn-rounded btn-sm"
                    onclick="$.table.search()"
                    ><i class="fa fa-search"></i>&nbsp;搜索</a
                  >
                  <a
                    class="btn btn-warning btn-rounded btn-sm"
                    onclick="$.form.reset()"
                    ><i class="fa fa-refresh"></i>&nbsp;重置</a
                  >
                </li>
              </ul>
            </div>
          </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
          <a
            class="btn btn-success"
            onclick="$.operate.add()"
            shiro:hasPermission="learn:ysdw:add"
          >
            <i class="fa fa-plus"></i> 添加
          </a>
          <!--                <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="learn:ysdw:edit">-->
          <!--                    <i class="fa fa-edit"></i> 修改-->
          <!--                </a>-->
          <!--                <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="learn:ysdw:remove">-->
          <!--                    <i class="fa fa-remove"></i> 删除-->
          <!--                </a>-->
          <!--                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="learn:ysdw:export">-->
          <!--                    <i class="fa fa-download"></i> 导出-->
          <!--                </a>-->
        </div>
        <div class="col-sm-12 select-table table-striped">
          <table id="bootstrap-table"></table>
        </div>
      </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:src="@{/ruoyi/js/study-time-recorder.js}"></script>
    <script
      th:src="@{/ajax/libs/qrcode/jquery.qrcode.min.js?v=1.24.1}"
    ></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script th:inline="javascript">
              var editFlag = [[${@permission.hasPermi('learn:ysdw:edit')}]];
              var removeFlag = [[${@permission.hasPermi('learn:ysdw:remove')}]];
              var prefix = ctx + "learn/ysdw";


      // 页面加载完成后自动开始记录学习时长
      $(document).ready(function () {
        console.log("页面加载完成，开始记录学习时长");
        // 开始记录学习视频模块的学习时长（模块级记录）
        StudyTimeRecorder.start("audio", 0);
      });

      // 页面卸载时触发
      window.addEventListener("unload", function (event) {
        console.log("unload 事件触发，结束学习记录");
        StudyTimeRecorder.end(true);
      });

              $(function() {
                  var options = {
                      url: prefix + "/list",
                      createUrl: prefix + "/add",
                      updateUrl: prefix + "/edit/{id}",
                      removeUrl: prefix + "/remove",
                      exportUrl: prefix + "/export",
                      modalName: "有声读物",
                      onLoadSuccess: function(data) {
                          // 数据加载成功后执行的函数
                          initQrcode();
                      },
                      columns: [{
                          checkbox: true
                      },
                      {
                          field: 'id',
                          title: '有声读物ID',
                          visible: false
                      },
                      {
                          field: 'title',
                          title: '读物标题'
                      },
                      {
                          field: 'coverUrl',
                          title: '封面图片',
                          formatter: function(value, row, index) {
                            return $.table.imageView(ctx + value);
                          }
                      },
                      {
                          field: 'audioUrl',
                          title: '音频资源',
                          formatter: function(value, row, index) {
                              if (!value) {
                                  return '<span class="text-muted">无音频资源</span>';
                              }

                              // 为每个音频元素生成唯一ID
                              var audioId = 'audio_' + row.id;
                              var buttonId = 'btn_' + row.id;

                              var audioHtml = '<div>' +
                                  '<audio id="' + audioId + '" src="' + ctx + value + '" preload="none" style="width: 100%;"></audio>' +
                                  '<div style="margin-top: 5px;">' +
                                  '<button id="' + buttonId + '" class="btn btn-default btn-xs" onclick="togglePlay(\'' + audioId + '\', \'' + buttonId + '\')">' +
                                  '<i class="fa fa-play"></i> 播放' +
                                  '</button>' +
                                  '<a href="' + ctx + value + '" download class="btn btn-default btn-xs" style="margin-left: 5px;">' +
                                  '<i class="fa fa-download"></i> 下载' +
                                  '</a>' +
                                  '</div>' +
                                  '</div>';
                              return audioHtml;
                          }
                      },
                      {
                          field: 'duration',
                          title: '音频时长(秒)'
                      },
                      {
                          field: 'narrator',
                          title: '朗读者'
                      },
      <!--                {-->
      <!--                    field: 'category',-->
      <!--                    title: '分类'-->
      <!--                },-->
                      {
                          field: 'description',
                          title: '读物描述'
                      },
                      {
                          field: 'listenCount',
                          title: '收听次数'
                      },
                      {
                          field: 'qrCodeUrl',
                          title: '二维码图片',
                          formatter: function(value, row, index) {
                              // return $.table.imageView(value);
                              return '<div id="' + row.id + '" class="qrcode" data-url="' + row.audioUrl + '"></div>';
                          }
                      },
                      {
                          field: 'status',
                          title: '状态',
                          formatter:function (value){
                              if (value==1){
                                  return '<span class="label-success">启用</span>'
                              }else{
                                  return '<span class="label-danger">禁用</span>'

                              }
                          }
                      },
                      {
                          title: '操作',
                          align: 'center',
                          formatter: function(value, row, index) {
                              var actions = [];
                              actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                              actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                              return actions.join('');
                          }
                      }]
                  };
                  $.table.init(options);
              });

                      // 切换音频播放/暂停状态
        function togglePlay(audioId, buttonId) {
            var audio = document.getElementById(audioId);
            var button = document.getElementById(buttonId);
            var icon = button.querySelector('i');

            // 暂停其他正在播放的音频
            $('audio').each(function() {
                if (this.id !== audioId && !this.paused) {
                    this.pause();
                    var otherButton = document.getElementById(this.id.replace('audio_', 'btn_'));
                    if (otherButton) {
                        otherButton.querySelector('i').className = 'fa fa-play';
                        otherButton.innerHTML = '<i class="fa fa-play"></i> 播放';
                    }
                }
            });

            if (audio.paused) {
                // 播放音频
                audio.play().then(function() {
                    // 成功播放
                    icon.className = 'fa fa-pause';
                    button.innerHTML = '<i class="fa fa-pause"></i> 暂停';
                }).catch(function(error) {
                    // 播放失败处理
                    console.error('音频播放失败:', error);
                    layer.alert('音频播放失败，请检查文件格式或网络连接', {icon: 2});
                });
            } else {
                // 暂停音频
                audio.pause();
                icon.className = 'fa fa-play';
                button.innerHTML = '<i class="fa fa-play"></i> 播放';
            }
        }



        function initQrcode() {
            // 为每个列表行生成二维码
                  $(".qrcode").each(function(index, element) {
                      // 获取需要生成二维码的数据（假设从data-id属性获取）
                      var qrcodeData = $(element).data("url");
                      if (qrcodeData) {
                          // 生成二维码
                          $(element).qrcode({
                              render: "canvas", // 渲染方式：canvas或table
                              width: 80,       // 二维码宽度
                              height: 80,      // 二维码高度
                              text: qrcodeData // 二维码内容
                          });
      <!--                    $(element).click(function() {-->
      <!--                        layer.open({-->
      <!--                            type: 1,-->
      <!--                            title: false,-->
      <!--                            closeBtn: 0,-->
      <!--                            area: ['300px', '300px'],-->
      <!--                            skin: 'layui-layer-nobg', //没有背景色-->
      <!--                            shadeClose: true,-->
      <!--                            content: $(element)-->
      <!--                        });-->
      <!--                    });-->
                      }
                  });
              }
              function playVideo(videoSrc) {
                  $('#videoPlayer').attr('src', videoSrc);
                  $('#videoModal').modal('show');
              }
    </script>
  </body>
</html>
